[#ftl]
[#--@define "agile._MetadataAware2"]
	//widgetsInTemplate:true,
	context:null,metadataCategory:"style",name:"",htmlName:"",value:"",defValue:"",width:"80px",placeHolder:"",unit:"",tooltip:"",fireOnChange:true,required:false,_valueRegExp: null,_integerRegExp:new RegExp("^(-?[0-9]+)$"),_decimalRegExp:new RegExp("^(0.[0-9]+)$")
	,sequence:0,isKey:false
	,constructor:function(){
		aspect.after(this,"startup",lang.hitch(this,function(){
			if(!this._initMetadataAware){								
				this.init();
				this._initMetadataAware = true;
			}
		}));
	}
	,postMixInProperties:function(){
		if(this.templateString){			
			this.templateString = lang.replace(this.templateString,agile.i18nValues(this.templateString,this));			
		}
	}
	,init:function(){
		
	}
	,initState:function(context){
	}
	,initCustomState:function(widget){
	}

	,onChange:function(value,name,htmlName){
		//summary: apply style changes to the working widget
//		console.log(this.declaredClass,lang.replace("##[_MetadataAware]:value={0},name='{1}',htmlName='{2}',has context={3}",[value,name,htmlName,this.context != null]));
		if(this.context && htmlName){
			var ownerWidget = this.context.getCurrentWidget();
//			console.log("ownerWidget:",ownerWidget);
			if(ownerWidget){				
//				var jsName = agile.adviseCssName4Js(htmlName);
//				ownerWidget.metadata("style."+htmlName,value);
//				var nodes = ownerWidget.getStyleNodes(htmlName);
//
//				for(var i = nodes.length-1; i >=0; i--){
//					style.set(nodes[i],jsName,value);
//				}
				ownerWidget.metadata("style."+htmlName,value);
				var jsName = agile.adviseCssName4Js(htmlName);			
				array.forEach(ownerWidget.getStyleNodes(htmlName),function(node){
					style.set(node,jsName,value);
				});
				
				var constraint = ownerWidget.styleConstraints[htmlName];
				if(constraint){					
					constraint.onValueChange(ownerWidget,name,htmlName,value);
				}				
			}
		}else if(this.context && name){
			var ownerWidget = this.context.getCurrentWidget();
			if(ownerWidget){
				var constraint = ownerWidget.attributes[htmlName];
				if(constraint){					
					constraint.onValueChange(ownerWidget,name,value);
				}
			}
		}
	}
	,preview:function(value,name,htmlName){
		//summary:preview the changes without changing the metadata 
		if(this.context){
			var ownerWidget = this.context.getCurrentWidget();
			if(ownerWidget){				
				var jsName = agile.adviseCssName4Js(htmlName);					
				var nodes = ownerWidget.getStyleNodes(htmlName);
				for(var i = nodes.length-1; i >=0; i--){
					style.set(nodes[i],jsName,value);
				}
				var constraint = ownerWidget.styleConstraints[htmlName];
				if(constraint){					
					constraint.onValueChange(ownerWidget,name,htmlName,value);
				}				
			}
		}
	}
//	,supressKeyEvent:function(editor,fireEnterKeyPress){
//		this.own(
//			on(editor, "keyDown", lang.hitch(this,function(event){
//				if (event.keyCode == keys.ENTER){
//					if(fireEnterKeyPress) this.onEnterKeyPress();
//				}				
////				event.stopPropagation();
//			}))
////			,on(editor, "keyUp",function(event){				
////				event.stopPropagation();				
////			})
//		);
//	}
	,onEnterKeyPress:function(){
		//summary:post process after ENTER key is pressed on the form widget
		//console.error(this.declaredClass,"onEnterKeyPress should be removed")
	}
	,isValid:function(){
		return true;
	}
	/*parse the display value to the value expected by the editor widget*/
	 ,parse:function(text){
		 return text;
	 }
	 /*format the value before display in the editor widget*/
	 ,format:function(value){
		 return value;
	}
//	,focus:function(){
//		if(this.editor && this.editor.isFocusable()){
//			this.editor.focus();
//			this.hasFocus = true;
//		}
//	}
//	,blur:function(){
//		if(this.editor && this.hasFocus){
//			this.hasFocus = false;
//			this.editor.focusNode.blur();
//		}
//	}
//	,onEscKeyPress:function(){
//		this.escKeyPressed = true;
//		//blur to fire the change event
//		this.blur();
//	}
//		,get:function(name){
//		if(name == "value"){
//			return this.parse(this.editor.get("value"));
//		}
//		return this.inherited(arguments);
//	}
//	,get:function(name,value){
//		return this.inherited(arguments);
//	}
//	,set:function(name,value){
////		console.log(this.declaredClass,"[_MetadataEditor] set name=",name,",value=",value,"this.editor=",this.editor);
//		this[name] = value;
//		
//		this.inherited(arguments);
//	}
//	,reset1:function(name,value){
////		console.log(this.declaredClass,"[_MetadataEditor] reset name=",name,",value=",value);
//		this[name] = value;
//	}
[/@--]
